<template>
  <view class="consumption-page">
    <!-- 消费记录列表容器 -->
    <view class="record-list">
      <!-- 循环渲染每条消费记录 -->
      <view class="record-item" v-for="(record, index) in consumptionRecords" :key="index">
        <!-- 时间信息（突出显示） -->
        <text class="record-time">{{ record.time }}</text>
        
        <!-- 游玩项目 -->
        <text class="record-info">游玩项目：{{ record.project }}</text>
        
        <!-- 游玩次数 -->
        <text class="record-info">游玩次数：{{ record.playCount }}</text>
        
        <!-- 消费类型 -->
        <text class="record-info">消费类型：{{ record.consumptionType }}</text>
        
        <!-- 会员姓名 -->
        <text class="record-info">会员姓名：{{ record.memberName }}</text>
        
        <!-- 会员卡号 -->
        <text class="record-info">会员卡号：{{ record.memberId }}</text>
        
        <!-- 手机号 -->
        <text class="record-info">手机号：{{ record.phone }}</text>
        
        <!-- 扣币数量（红色突出显示） -->
        <text class="record-deduct">扣币数量：{{ record.deductCount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 消费记录数据（模拟）
      consumptionRecords: [
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          playCount: 1,
          consumptionType: '预付款',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: 25
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          playCount: 1,
          consumptionType: '游戏币',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: 25
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          playCount: 1,
          consumptionType: '游乐币',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: 25
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          playCount: 1,
          consumptionType: '游乐币',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: 25
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.coinDeductionRecord')
  	});
  },
};
</script>

<style scoped>
/* 页面容器 - 100%高度 */
.consumption-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 15px 0;
}

/* 记录列表容器 - 控制左右边距 */
.record-list {
  padding: 0 16px;
}

/* 单条记录样式 */
.record-item {
  padding: 18px 0;
  border-bottom: 1px solid #f5f5f5; /* 记录间分隔线 */
}

/* 最后一条记录移除底部边框 */
.record-item:last-child {
  border-bottom: none;
}

/* 时间样式 - 突出显示 */
.record-time {
  display: block;
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-bottom: 12px;
}

/* 普通信息行样式 */
.record-info {
  display: block;
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 扣币数量样式 - 红色突出 */
.record-deduct {
  display: block;
  font-size: 14px;
  color: #ff4d4f; /* 红色标识扣币 */
  margin-top: 4px;
}
</style>